<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="utf-8">
<title>简洛订餐系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jsp:include page="/WEB-INF/views/inc/inc.jsp"></jsp:include>

</head>
<body style="zoom: 1;">
	<jsp:include page="/WEB-INF/views/inc/Header.jsp"></jsp:include>
	<div class="container" id="contarner">

		<div class="row padding-small-top ">
			<div class="tab x10 ">
				<div class="tab-head">
					<ul class="tab-nav">
						<c:forEach var="item" items="${obj }" varStatus="ind">
							<li <c:if test="${ind.index == 0}">class="active"</c:if>><a
								href="#${item.key.sid}" role="tab" data-toggle="tab">${item.key.sname}</a></li>
						</c:forEach>
					</ul>
				</div>
				<div class="tab-body border radius">
					<c:forEach var="item" items="${obj }" varStatus="mind">
						<div
							class='tab-panel <c:if test="${mind.index == 0}">active</c:if>'
							id="${item.key.sid }">
							<table class="table table-striped">
								<thead>
									<tr>
										<th width="10%"></th>
										<th width="30%">菜名</th>
										<th width="30%">单价</th>
										<th width="30%">评价</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach var="menu" items="${item.value }">
										<tr>
											<td><label class="checkbox" for="checkbox${menu.mid }"
												style="margin: 0px;"> <input type="checkbox"
													value="${menu.mid }" id="checkbox${menu.mid }"
													name="selectedValue" data-toggle="checkbox">
											</label> <input type="hidden" name="names" value="${menu.mname }" />
												<input type="hidden" name="unitprices"
												value="${menu.munitprice }" /></td>
											<td>${menu.mname }</td>
											<td>￥${menu.munitprice }</td>
											<td></td>
										</tr>
									</c:forEach>
								</tbody>
							</table>

						</div>
					</c:forEach>
				</div>

				<div class="padding-small-top">
					<button class="button button-big bg-main" id="subButton"
						data-toggle="click" data-width="50%">提交订单</button>
					<button class="button button-big bg-main dialogs" id="openMyModal"
						data-toggle="click" data-target="#myModal" data-mask="1"
						data-width="500px" style="display: none;"></button>
				</div>
			</div>
			<div class="x2" id="noticesDiv">
				<table class="table">
					<thead>
						<tr>
							<th>系统公告</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="col-xs-12">
								<ul class="list-group">
									<c:if test="${notices != null }">
										<c:forEach var="notice" items="${notices }">
											<li style="cursor: pointer;" name="noticeli"
												snid="${notice.snid }" sntitle="${notice.sntitle }"
												sncontent="${notice.sncontent }"
												userName="${notice.userName }" sntime="${notice.sntime }">${notice.sntitle }</li>
										</c:forEach>
									</c:if>
								</ul>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<!-- /.container -->
	<div
		style="width: 400px; position: absolute; left: 780px; top: 120px; display: none;"
		id="noticeContent">
		<div class="panel">
			<div class="panel-head">
				<strong>系统公告</strong><span name="close" class="close float-right"></span>
			</div>
			<div class="panel-body" style="background-color: white;">

				<div class="input-group " style="margin: 10px 0px;">
					<label class="addon">公告标题：</label> <label class="input radius-none"
						id="sntitle" name="sntitle">平台 </label>
				</div>
				<div class="input-group " style="margin: 10px 0px;">
					<label class="addon">发布时间：</label> <label class="input radius-none"
						id="sntime" name="sntime">平台 </label>
				</div>
				<div class="input-group " style="margin: 10px 0px;">
					<label class="addon">发布人： </label> <label class="input radius-none"
						id="userName" name="userName">平台 </label>
				</div>
				<div class="input-group " style="margin: 10px 0px;">
					<label class="addon">公告内容：</label> <label class="input radius-none"
						id="sncontent" name="sncontent"><pre> </pre></label>
				</div>
			</div>
		</div>
	</div>



	<!-- Modal -->
	<div id="myModal" >
		<div class="dialog fadein-top">
			<div class="dialog-head">
				<span class="close rotate-hover "></span> <strong>已经选购的菜品</strong>
			</div>
			<form action="UserAddOrder.nut" id="tableForm" method="post">
				<div class="dialog-body">
					<table class="table table-striped" id="slectedOrder">
						<thead>
							<tr>
								<th class="col-xs-7">菜名</th>
								<th class="col-xs-2">数量</th>
								<th class="col-xs-2">价格</th>
							</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
				</div>
				<div class="dialog-foot">
					<button type="button" class="button dialog-close"
						data-dismiss="modal">关闭</button>
					<button type="button" class="button bg-green dialogs"
						id="ordersSubmit" data-toggle="click" data-mask="1"
						data-z-index="100" data-width="50%"
						data-target="#confirmationModal">提交</button>
				</div>
			</form>
		</div>
	</div>

	<jsp:include page="/WEB-INF/views/inc/Inc01.jsp"></jsp:include>

	<!-- Submit Order Confirmation Modal -->
	<div class="modal-dialog" id="confirmationModal">
		<div class="dialog fadein-top dialog-sm">
			<div class="modal-content">
				<div class="dialog-head">
					<span class="close rotate-hover "></span> <strong>确认提交</strong>
				</div>
				<div class="dialog-body">请确认是否提交订单？</div>
				<div class="dialog-foot">
					<button type="button" class="button dialog-close"
						data-dismiss="modal">取消</button>
					<button type="button" class="button bg-green" id="submitBut">确定</button>
				</div>
			</div>
		</div>
	</div>
	<!-- / Submit Order Confirmation Modal -->

	<!-- pinglun 
	<div class="rst-drawer-wrapper ui_slide_in">
		<article class="rst-drawer slide_content_wrap">
			<header id="food_comment_view_123"
				class="rst-drawer-header eleme_view">
				<a id="rst_cmt_close" class="rst-drawer-close">×</a>
				<div class="rst-drawer-dish">
					<h3 class="dish-name" title="台湾肉燥饭">
						台湾肉燥饭<a class="dish-favor favor_btn ">♥</a>
					</h3>
					<p class="dish-intro"></p>
				</div>
			</header>
			<section class="rst-drawer-rating group">
				<div class="rating-point">
					<strong class="point">3.5</strong><span class="comment">6人评价</span>
				</div>
				<ul class="rating-diagram" style="list-style:none;padding: 0; margin: 0;">
					<li>
			           <span class="rating-stars">
			             <i class="glyph-rating-star">★</i>
			             <i class="glyph-rating-star">★</i>
			             <i class="glyph-rating-star">★</i>
			             <i class="glyph-rating-star">★</i>
			             <i class="glyph-rating-star">★</i>
		               </span>
		               <span class="bar" style="width: 40px;"></span>50.0%</li>
					<li>
					   <span class="rating-stars">
					       <i class="glyph-rating-star">★</i>
					       <i class="glyph-rating-star">★</i>
					       <i class="glyph-rating-star">★</i>
					       <i class="glyph-rating-star">★</i>
					       <i class="glyph-rating-star off">★</i>
					   </span>
					   <span class="bar" style="width: 13.333333333333332px;"></span>16.7%</li>
					<li>
					   <span class="rating-stars">
					       <i class="glyph-rating-star">★</i>
					       <i class="glyph-rating-star">★</i>
					       <i class="glyph-rating-star">★</i>
					       <i class="glyph-rating-star off">★</i>
					       <i class="glyph-rating-star off">★</i>
					   </span>
					   <span class="bar" style="width: 0px;"></span>0.0%</li>
					<li>
					   <span class="rating-stars">
						   <i class="glyph-rating-star">★</i>
						   <i class="glyph-rating-star">★</i>
						   <i class="glyph-rating-star off">★</i>
						   <i class="glyph-rating-star off">★</i>
						   <i class="glyph-rating-star off">★</i>
					   </span>
					   <span class="bar" style="width: 0px;"></span>0.0%</li>
					<li>
					   <span class="rating-stars">
					       <i class="glyph-rating-star">★</i>
					       <i class="glyph-rating-star off">★</i>
					       <i class="glyph-rating-star off">★</i>
					       <i class="glyph-rating-star off">★</i>
					       <i class="glyph-rating-star off">★</i>
					   </span>
					   <span class="bar" style="width: 26.666666666666664px;"></span>33.3%</li>
				</ul>
			</section>
			<section class="rst-drawer-comment comment_wrap">
				<h4 class="rst-drawer-cheader">
					用户评价<span class="rst-drawer-checkbox"><input
						id="comment_type_cb" class="checkbox" type="checkbox" checked=""><label
						for="comment_type_cb">有内容的评价</label></span>
				</h4>
				<ul class="c_l">
					<li id="comment_view_124" class="rst-drawer-citem eleme_view"><p
							class="rdcmt-info">
							p***4 2014-09-25<i class="icon-d-star s2"></i>
						</p>
						<p class="rdcmt-text">差</p></li>
					<li id="comment_view_125" class="rst-drawer-citem eleme_view"><p
							class="rdcmt-info">
							I***灬 2014-09-16<i class="icon-d-star s10"></i>
						</p>
						<p class="rdcmt-text">好吃</p></li>
				</ul>
				<p class="rst-drawer-helper hide c_l_t">加载中…</p>
			</section>
		</article>
	</div>-->
	<!-- pinglun -->
	
	<script type="application/javascript">
    $(function (){ 
    
    
        $("#subButton").click(function(){
        	
            var selectedValue = $('input[name="selectedValue"]');
            var checkedValue = $('input[name="selectedValue"]').filter(':checked'); 
            var names = $('input[name="names"]');
            var unitprices = $('input[name="unitprices"]');
            $('#slectedOrder tbody tr').remove();
            var table = $("#slectedOrder");
            if (checkedValue.length == 0) {
            	var dialog = art.dialog({
                    lock: true,
                    background: '#000', // 背景色
                    opacity: 0.2,  // 透明度
                    title: '警告',
                    content: '请选择要定的饭！',
                    icon: 'warning',
                    follow: document.getElementById('btn2'),
                    ok: true
                });
            	return;
            }
            for (var i = 0; i < selectedValue.length; i ++) {
                if (selectedValue[i].checked) {
                    var tr = "<tr><td >" +　names[i].value +　"</td>";
                    tr += "<input type='hidden' name='midarr' value='" + selectedValue[i].value + "' />";
                    tr += "<input type='hidden' name='mnamearr' value='" + names[i].value + "' />";
                    tr += "<input type='hidden' name='unitpricesarr' value='" + unitprices[i].value + "' />";
                    tr +="<td >";
                    tr += "<div class=\"form-group\" style=\"margin:0px;\"><input type=\"text\" name=\"nums\" placeholder=\"数量\" class=\"form-control input-sm\" style=\"width:60px;\" value=\"1\" /></div></td>";
                    tr +="<td >" +　unitprices[i].value +　"</td></tr>";
                    table.append(tr);
                }
            }
            var nums = $('input[name="nums"]');
            var unitpricesarr = $('input[name="unitpricesarr"]');
            var total = 0;
            var totalPrice = 0;
            for (var i = 0; i < nums.length; i ++) {
                var num = parseInt(nums[i].value);
                total += num;
                totalPrice += num * parseInt(unitpricesarr[i].value);
            }
            var tr = "<tr id=\"last\"><td >总计</td>";
            tr +="<td>" + total + "</td>";
            tr +="<td>" + totalPrice + "<input type='hidden' name='totalPrice' value='" + totalPrice + "'/></td></tr>";
            table.append(tr);
            
            $('input[name="nums"]').live("focusout", function(event) {
                var par = this.parentNode.parentNode.parentNode;
                var unitpricesarr = $('.dialog-win #slectedOrder input[name="unitpricesarr"]');
                $(par.parentNode).children('tr:last').remove();
                if(this.value == ""){
                	this.value = "1";
                }
                var value = Math.abs(parseInt(this.value));
                this.value = value;
                par.lastChild.innerHTML = (value * unitpricesarr[par.rowIndex - 1].value);
                //par.children("td:nth-child(2)").append("<span> - 2nd!</span>");
                var nums = $('.dialog-win #slectedOrder input[name="nums"]');
                var total = 0;
                var totalPrice = 0;
                for (var i = 0; i < nums.length; i ++) {
                    var num = Math.abs(parseInt(nums[i].value));
                    total += num;
                    if (unitprices[i]) {
	                    totalPrice += num * parseInt(unitpricesarr[i].value);
                    }
                }
                var tr = "<tr id=\"last\"><td >总计</td>";
                tr +="<td >" + total + "</td>";
                tr +="<td >" + totalPrice + "<input type='hidden' name='totalPrice' value='" + totalPrice + "'/></td></tr>";
                $(par.parentNode).append(tr);
            });
//             $("#myModal").modal();      
            $("#openMyModal").click();      
        });
    
        // 确认删除按钮
        $("#submitBut").click(function(){
            $('#tableForm').submit();
        });
        
        $('li[name="noticeli"]').click(function(e){
        	var target = $("#noticeContent");
        	target.css("display","none");
        	if (target.hasClass("fadein-right")) {
	        	target.removeClass("fadein-right");
	        	target.addClass("fadein-right");
        	} else {
	        	target.removeClass("fadein-left");
	        	target.addClass("fadein-right");
        	}
        	var sntitle = $(this).attr("sntitle");
        	var sncontent = $(this).attr("sncontent");
        	var sntime = $(this).attr("sntime");
        	var userName = $(this).attr("userName");
        	target.css("display","block");
        	target.css("left", function(){
        		return  $(document.body).width() - 400;
        	});
        	
        	$("#sntitle").html(sntitle);
        	$("#userName").html(userName);
        	$("#sntime").html(sntime);
        	$("#sncontent").html("<pre>" + sncontent + "</pre>");
        	
        	$('#noticeContent span[name="close"]').click(function(){
//         		target.removeClass("fadein-right");
//                 target.addClass("fadeout-right");
        		target.css("display","none");
        	});
        });
    });

	
	
	</script>
</body>
</html>